<template>
    <div id="container">
      <div id="viewDiv"></div>
    </div>
  </template>
  
  <script setup>
  import {onMounted,ref} from 'vue'
  import Map from '@arcgis/core/Map'
  import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
  import SceneLayer from '@arcgis/core/layers/SceneLayer'
  import SceneView from '@arcgis/core/views/SceneView'
  var map,view,点图层,多面体图层
  
  onMounted(()=>{
    多面体图层 = new SceneLayer({//创建场景图层
      url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Buildings_NewYork_Galleries/SceneServer",
      renderer :{//创建区间区间范围渲染器
          type:"simple",
          symbol:{
                type: "mesh-3d",  // autocasts as new MeshSymbol3D()
                symbolLayers: [{
                    type: "fill",  
                    material: { color: [255,255,255,0.6] },
                    edges: {
                        type: "solid",
                        color: [50, 50, 50, 0.5]
                    }
                }]
          }
      }
    })//多面体图层结尾
    点图层= new FeatureLayer({//创建要素图层
        url: "https://services2.arcgis.com/cFEFS0EWrhfDeVw9/arcgis/rest/services/art_galleries_nyc/FeatureServer",
        renderer:  {
            type:"simple",
            symbol: {
                type:"point-3d",
                symbolLayers: [{
                    type:"icon",
                    resource: {  primitive: "circle" },
                    material: { color: "red" }
                }],
                verticalOffset: {//设置垂直偏移
                    screenLength: 40,
                    maxWorldLength: 200,
                    minWorldLength: 35
                },
                callout: {//设置牵引线
                    type:"line",
                    color: "#534741",
                    size: 1
                }
            }
        },
        elevationInfo: {//设置Z值放置模式
            mode: "relative-to-scene"
        },
        featureReduction: {//配置点要素数目减少的方法
            type: "selection" 
        },
        labelingInfo: [{//设置标注信息
            labelExpressionInfo: {//标注表达式
                value: "{name}"
            },
            symbol: {//设置标注对应的符号,这里是label-3d,实测用text也可
                type:"label-3d",
                symbolLayers: [{
                    type:"text",
                    font:{
                        family:"微软雅黑",
                        size:12,
                    },
                    material: {
                        color: "white"
                    },
                    halo: {//晕圈
                        color: [50, 50, 50],//晕圈颜色
                        size: 1,//晕圈尺寸
                    },
                }]
            }
        }],
    })//点图层结尾
    map=new Map({
      basemap:"hybrid",
      ground:"world-elevation",
      layers:[多面体图层,点图层]
    })
    view = new SceneView({
        container: "viewDiv",
        map: map,
        environment: {
            lighting: {
                directShadowsEnabled: true,//显示阴影
              },
        },
    })
    view.ui.remove(["zoom","attribution","compass","navigation-toggle"]);//清除默认小部件
    view.when(function () {
        view.goTo({ 
            target: 点图层.fullExtent, 
            tilt: 60, 
            zoom: 15
          }, {
                duration:300,
                animate: true//默认为true
            }
        )
    })
  })//onMounted()结尾
  </script>
  
  <style scoped>
  #viewDiv,#container{
    height:100%;width:100%;padding:0;margin:0;
  }
  </style>
  